/*
 * @Author: captern
 * @@Gitee: https://gitee.com/captern
 * @@websit: http://www.captern.cn/
 * @Date: 2020-06-23 17:07:36
 * @LastModifiedBy: captern
 * @LastEditTime: 2020-08-17 11:03:00
 * @Description:
 */
import React from "react"
import PropTypes from "prop-types"
import { observer, inject } from "mobx-react"
import ApiModel from "../../api/apiModel/apiModel"
import "./note.scss"

@inject("UserStore")
@observer
class CheckMethod extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      checktype: "xuexiao",
      jiating: [
        require("../../static/notes/img_xinxi_jiating1@3x.jpg"),
        require("../../static/notes/img_xinxi_jiating2@3x.jpg"),
        require("../../static/notes/img_xinxi_jiating3@3x.jpg"),
        require("../../static/notes/img_xinxi_jiating4@3x.jpg"),
        require("../../static/notes/img_xinxi_jiating5@3x.jpg"),
      ],
      xuexiao: [
        require("../../static/notes/img_xinxi_xuexiao1@3x.jpg"),
        require("../../static/notes/img_xinxi_xuexiao2@3x.jpg"),
        require("../../static/notes/img_xinxi_xuexiao3@3x.jpg"),
        require("../../static/notes/img_xinxi_xuexiao4@3x.jpg"),
        require("../../static/notes/img_xinxi_xuexiao5@3x.jpg"),
      ],
      noteList: [
        // {
        //   title: '活动已上线',
        //   content:
        //     '作品上传时间为即日起至2020年8月15日。 <br />更多活动内容，敬请期待。',
        // },
        {
          title: "",
          content: "",
        },
      ],
    }
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {
    this.getNotes()
  }
  componentWillUnmount() {}
  getNotes = () => {
    ApiModel.getNoteList().then((res) => {
      console.log(res)
      if (res.code === 0) {
        this.setState({
          noteList: res.data,
        })
      }
    })
  }

  changeType = (value) => {
    this.setState({ checktype: value })
  }

  render() {
    function createMarkup(msg) {
      return { __html: msg }
    }
    let { noteList, checktype, xuexiao, jiating } = this.state

    return (
      <div className="note-container">
        <div className="method-bkg-area">
          <div className="method-title jiating">
            <div className="method-text">入围名单公布</div>
          </div>
        </div>
        {/* {noteList.map((item, index) => {
          return (
            <div className="note-area" key={index}>
              <div className="note-title">{item.title}</div>
              <div className="note-desc">
                <span
                  className="dec-main"
                  dangerouslySetInnerHTML={createMarkup(item.content)}
                />
              </div>
            </div>
          )
        })} */}
        <div className="note-area">
          <div className="note-title">
            <div
              onClick={() => this.changeType("xuexiao")}
              className={
                checktype == "xuexiao" ? "title-item check" : "title-item"
              }
            >
              学校参赛
            </div>
            <div
              onClick={() => this.changeType("jiating")}
              className={
                checktype == "jiating" ? "title-item check" : "title-item"
              }
            >
              家庭参赛
            </div>
          </div>
          <div className="note-desc">
            {checktype == "xuexiao" ? (
              <div>
                {xuexiao.map((item, index) => {
                  return (
                    <div className="img-item" key={index}>
                      <img src={item} />
                    </div>
                  )
                })}
              </div>
            ) : (
              <div>
                {jiating.map((item, index) => {
                  return (
                    <div className="img-item" key={index}>
                      <img src={item} />
                    </div>
                  )
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }
}

export default CheckMethod
